<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="javascript:;">
    姓名: <input type="text" name="username" id=""/><br/>
    密码: <input type="password" name="password" id=""/><br/>
    性别: 男 <input type="radio" name="sex" value="1"/>
         女 <input type="radio" name="sex" value="0"/><br/>
    <button id="btn">提交</button>
</form>
<script>
    function serialize(form){
        var elements = form.elements;
        var data = [];
        for(var i=0;i<elements.length;i++){
            var type = elements[i].type;
            console.dir(elements[i]);
            var nowData = elements[i].name+'='+elements[i].value;
            switch (type){
                case 'text':
                    data.push(nowData);
                    break;
                case 'password':
                    data.push(elements[i].name+'='+elements[i].value);
                    break;
                case 'radio':
                    if(elements[i].checked){
                        data.push(nowData);
                    }
                    break;
            }
        }
        return data.join('&');
    }
    window.onload = function(){
        var oBtn = document.querySelector('button');
        oBtn.onclick = function(){
            var oForm = document.getElementsByTagName('form')[0];
            var data = serialize(oForm);

            var xhr = new XMLHttpRequest();
            xhr.open('POST','/data',true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status==200){
                    var str = xhr.responseText;
                    alert(str);
                }
            }
            xhr.send(data);



        }

    }
</script>
</body>
</html>